<template>
  <div>
    <h3>编辑题目</h3>
    <div class="bt">
      <h4>下拉单选</h4>
    </div>
    <h4>标题</h4>
    <el-input type="text" v-model="data.title"></el-input>
    <!-- <el-input type="text" v-model="data.tips"></el-input> -->
    <div>
      <h4>选项</h4>
    </div>
    <br />
    <br />
    <el-row v-for="(item, key) in data.option" :key="key" class="el_row">
      <el-input type="text" v-model="item.text" class="el_input"> </el-input>
      <i class="el-icon-delete remove" @click="remove(key)"></i>
    </el-row>
    <el-row class="tj">
      <el-button @click="cs" class="an">添加项</el-button>
      <el-button class="an">添加其他</el-button>
    </el-row>
    <!-- 修改文字颜色 -->
    <h4>提示</h4>
    <br />
    <el-color-picker v-model="data.tips_color.color"></el-color-picker>
    <el-input
      type="textarea"
      :rows="6"
      placeholder="请输入内容"
      v-model="data.tips"
    ></el-input>
    <h5 style="float: right">可输入文字:{{ data.tips.length }}/10000</h5>

    <el-button class="bc">保存问卷</el-button>
  </div>
</template>

<script>
export default {
  props: ["data"],
  methods: {
    cs: function () {
      // console.log(this.data.option);
      // console.log(this.data.option.length);
      if (this.data.option.length < 6) {
        this.data.option.push({ text: "添加的选项文本", defaultValue: "默认选择文案" });
      } else {
        alert("对不起,最多只能有六个选项");
      }
      // console.log(this.data.option);
    },
    // 删除选项
    remove: function (key) {
      if (this.data.option.length > 2) {
        this.data.option.splice(key, 1);
      }else{
        alert("对不起,只能删除这么多了...")
        // 可以使用element-ui的提醒
      }
      // console.log(key);
    },
  },
};
</script>
<style scoped>
* {
  padding: 0;
  margin: 0;
  list-style: none;
  text-decoration: none;
}
.bt {
  border: 1px solid black;
  border-left: none;
  border-right: none;
  height: 30px;
  text-align: center;
  line-height: 30px;
}
.tj {
  margin-top: 10px;
}
.tj > .an {
  height: 30px;
  width: 80px;
}
h4 {
  color: black;
  float: left;
}
.bc {
  width: 150px;
  height: 30px;
  margin-top: 30px;
  margin: 0 auto;
  background-color: #2875e8;
  color: white;
}
.bc:hover {
  background-color: lightskyblue;
}
.el_row {
  display: flex;
}
.el_input {
  flex: 9;
}
.remove {
  flex: 1;
  line-height: 40px;
}
.remove:hover {
  color: lightskyblue;
  cursor: pointer;
}
</style>